<template>
  <div class="freight">
    <div class="head">
      <van-cell title="选择寄件城市" value="选择收件城市" />
      <van-dropdown-menu>
        <van-dropdown-item
          v-model="title1"
          :title="title1"
          @open="changeTypeT"
        />
        <van-dropdown-item
          v-model="title2"
          :title="title2"
          @open="changeTypeF"
        />
      </van-dropdown-menu>
      <van-stepper
        v-model="value"
        theme="round"
        button-size="33"
        disable-input
        @plus="plus"
        @minus="minus"
        max="40"
        min="1"
      />
    </div>

    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
      <van-area
        title="大陆地区"
        :area-list="areaList"
        @cancel="cancle"
        @confirm="confirm"
      />
    </van-popup>

    <div class="price">
      <div class="dayPrice">
        <div>
          <span class="num" v-if="allMoney === 0">_ _</span>
          <span class="num" v-else>{{ allMoney }}</span>
          元
        </div>
        <div>
          <span class="num" v-if="allWeight === 0">_ _</span>
          <span class="num" v-else>{{ allWeight }}</span>
          天
        </div>
      </div>
      <p class="numInfo">
        首重
        <em v-if="getDateFlag === false">0</em>
        <em v-else>{{ firstWeight }}</em>
        元(一公斤), 续重
        <em v-if="getDateFlag === false">0</em>
        <em v-else>{{ addWeight }}</em>
        元/公斤
      </p>
    </div>

    <div class="foot">
      此价格是官方指导价，具体价格可以和快递员协商，该时效是预估配送时间
    </div>
    <van-button
      @click="gotoSend"
      type="default"
      style="width: 100%; position: fixed; bottom: 0"
      >我要寄件</van-button
    >
  </div>
</template>

<script>
import { Toast } from 'vant'
import AeraInfo from '@/utils/area.js'
export default {
  name: '',
  data() {
    return {
      title1: '请选择',
      title2: '请选择',
      value: 1,
      areaList: AeraInfo,
      show: false,
      allMoney: 0,
      allWeight: 0,
      firstWeight: Math.ceil(Math.random() * 10),
      addWeight: Math.ceil(Math.random() * 5),
      tempType: true,
      getDateFlag: false
    }
  },
  methods: {
    cancle() {
      this.show = false
    },
    confirm(res) {
      // 判断下拉菜单是哪一个
      if (this.tempType) {
        this.title1 = res[1].name
      } else {
        this.title2 = res[1].name
      }
      if (this.getDateFlag === true) {
        this.firstWeight = Math.ceil(Math.random() * 10)
        this.addWeight = Math.ceil(Math.random() * 5)
      }
      if (this.title1 !== '请选择' && this.title2 !== '请选择') {
        this.getDateFlag = true
        this.allMoney = parseFloat(this.firstWeight + this.addWeight * (this.value - 1)).toFixed(1)
        this.allWeight = parseFloat(Math.ceil(this.value / 5)).toFixed(1)
      }
      this.show = false
    },
    changeTypeT() {
      this.show = true
      this.tempType = true
    },
    changeTypeF() {
      this.show = true
      this.tempType = false
    },
    plus() {
      if (this.getDateFlag !== true) {
        if (this.title1 === '请选择') {
          Toast({
            message: '请选择寄件地址',
            position: 'bottom'
          })
        } else if (this.title2 === '请选择') {
          Toast({
            message: '请选择收件地址',
            position: 'bottom'
          })
        }
      } else {
        if (this.value >= 1 && this.value < 40) {
          this.value++
          this.allMoney = parseFloat(this.firstWeight + this.addWeight * (this.value - 1)).toFixed(1)
          this.allWeight = parseFloat(Math.ceil(this.value / 5)).toFixed(1)
        } else {
          Toast({
            message: '已达到最大限制',
            position: 'bottom'
          })
        }
      }
    },
    minus() {
      if (this.getDateFlag !== true) {
        if (this.title1 === '请选择') {
          Toast({
            message: '请选择寄件地址',
            position: 'bottom'
          })
        } else if (this.title2 === '请选择') {
          Toast({
            message: '请选择收件地址',
            position: 'bottom'
          })
        }
      } else {
        if (this.value > 1 && this.value <= 40) {
          this.value--
          this.allMoney = parseFloat(this.firstWeight + this.addWeight * (this.value - 1)).toFixed(1)
          this.allWeight = parseFloat(Math.ceil(this.value / 5)).toFixed(1)
        }
      }
    },
    gotoSend() {
      this.$router.push('/express')
    }
  }
}
</script>

<style lang="less" scoped>
.freight {
  height: 100%;
  background-color: #f2f2f2;
}
.van-cell {
  background: transparent;
}
.van-cell__title,
.van-cell__value {
  padding: 0 1rem;
  color: #fff;
  text-align: center;
}
.van-dropdown-menu,
.van-dropdown-menu__bar {
  background-color: transparent !important;
}
.head {
  background-image: url(https://m.zto.com/static/img/freight-bg.7e35756.png);
  width: 100%;
  height: 12rem;
  background-size: 100% 100%;
}
.van-stepper {
  text-align: center;
  margin-top: 2rem;
}

.price {
  background-color: #fff;
  padding-bottom: 2rem;
}

.foot {
  color: #999;
  padding: 0.4rem;
  font-size: 0.8rem;
  text-align: center;
  margin-top: 1rem;
}
.numInfo {
  text-align: center;
  em {
    color: #3b95fa;
  }
}

.dayPrice {
  display: flex;

  .num {
    color: #3b95fa;
    font-weight: 700;
    font-size: 2rem;
  }
  div {
    flex: 1;
    text-align: center;
    padding-top: 3rem;
    padding-bottom: 2rem;
    position: relative;
    &:nth-child(2) {
      &::before {
        position: absolute;
        content: "";
        width: 0;
        height: 3rem;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        border: 0.01rem solid #eee;
      }
    }
  }
}

/deep/.van-cell__value {
  margin-left: 1.5rem;
}

/deep/ .van-dropdown-menu__bar {
  margin-top: 0.5rem;
  background-image: url();
  background-size: 1.5rem 1.5rem;
  background-position: center center;
  background-repeat: no-repeat;
}

/deep/ .van-dropdown-menu__item {
  border-radius: 2rem;
  border: 1px solid #fff;
  flex: none;
  width: 35%;
  margin: 0 auto;
}

/deep/ .van-cell {
  border: none;
}

/deep/ .van-stepper__input {
  margin: 0 2rem;
  width: 5rem;
}

// /deep/.van-picker {
//   position: absolute;
//   bottom: 0;
//   transform: translateY(100%);
//   width: 100%;
//   display: none;
// }

/deep/.van-ellipsis {
  color: #fff;
}

/deep/.van-picker-column__item {
  background-color: #fff;
}

/deep/ .van-hairline-unset--top-bottom {
  border: 1px solid #fff;
}

/deep/.van-picker-column__item .van-ellipsis {
  color: #000;
}
</style>
